<template>
  <div class="dv-body">
    <div class="dv">
      <h3>惠济区村(居)务监督平台</h3>
      <div class="dv-content">
        <el-input
          placeholder="请输入账号"
          v-model="username"
          clearable
          class="dv-username"
          type="text"
        >
        </el-input>
        <el-input
          placeholder="请输入密码"
          v-model="password"
          show-password
          class="dv-password"
          @keyup.enter.native="onSubmit"
        ></el-input>
        <el-row>
          <el-button type="primary" plain @click="onSubmit">登录</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit() {
      var username = this.username;
      var password = this.password;
      this.$axios
        .get("/user/login", {
          params: {
            username,
            password,
          },
        })
        // 成功回调
        .then((response) => {
          console.log(response);
          if (response.data.code == 200) {
            this.$store.commit("settoken", response.data.data.token);
            this.$store.commit("setid", response.data.data.user.id);
            this.$store.commit("setname", response.data.data.user.name);
            this.$store.commit("setusername", response.data.data.user.username);
            //level==1 区级管理员
            if (response.data.data.user.level == "1") {
              // 给区管理员获取所有的镇存起来
              var towns = [];
              response.data.data.townLevelIDS.forEach((item, index) => {
                towns.push({
                  value: Number(item),
                  name: response.data.data.townLevelNAMES[index],
                });
              });
              this.$store.commit("settowns", towns);
            }
            //level==2 镇级管理员
            else if (response.data.data.user.level == "2") {
              var towns = [];
              towns.push({
                value: Number(response.data.data.user.townId),
                name: response.data.data.name,
              });
              this.$store.commit("settowns", towns);
            } //level==3 村级管理员
            else if (response.data.data.user.level == "3") {
              var towns = [];
              towns.push({
                value: Number(response.data.data.user.townId),
                name: response.data.data.townname,
              });
              console.log(towns);
              this.$store.commit("settowns", towns);
              this.$store.commit("setcunname", response.data.data.villageName);
              this.$store.commit("setcunid", response.data.data.villageid);
            }
            //存起来用户的等级
            this.$store.commit("setlevel", response.data.data.user.level);
            this.$message({ message: "登录成功！", type: "success" });
            this.$router.push("/shouye"); //刚才删掉了
          } else {
            this.$message({
              message: "登录失败，请查看账号密码是否正确！",
              type: "error",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>


<style lang="less" scoped>
.dv-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../../img/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.dv {
  width: 30%;
  text-align: center;
  margin-left: 32%;
  margin-top: 9%;
  padding: 3%;
  border-radius: 25px;
}
h3 {
  font-size: 34px;
}
.dv-content {
  width: 80%;
  margin-left: 10%;
}
.dv-username {
  margin-top: 30px;
}
.dv-password {
  margin-top: 30px;
}
.el-button {
  margin-top: 30px;
  width: 100%;
  font-size: 18px;
}
</style>